<template>
  <div class="dashboard-container flex flex-col">
    <div class="pt-2.5">
      <el-row>
        <el-col v-if="oem.showIndexLogo" :span="24" class="text-center"><img ref="logo" class="inline-block h-32" :src="logoStr" alt="logo" /></el-col>
        <el-col v-if="oem.showIndexContent" :span="24" class="text-center mb-10 text-2xl"><div style="color: #d75f5f;">{{oem.indexContent}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="16" :offset="4">
          <div>
            <el-input v-model="keywords" size="large" class="input-with-select">
              <template slot="prepend">
                <el-cascader
                  v-model="nation"
                  :options="nationList"
                  :style="{width: '100%'}"
                  :props="{checkStrictly: true}"
                  collapse-tags
                  filterable
                  clearable
                ></el-cascader>
              </template>
              <el-button slot="append" @click="search(nation, keywords)">
                立即搜索
              </el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="search-bg flex justify-center items-center overflow-hidden">
      <img class="flex-shrink-0 min-w-100% min-h-100%" src="~@/assets/search-bg.jpg" />
    </div>
  </div>
</template>

<style scoped>

  .dashboard-container{
    height: calc(100vh - 84px);
    background: white;
  }

  .el-input::v-deep .el-input-group__prepend {
     padding: 0;
    width: 225px;
  }
  .el-input::v-deep .el-input__inner {
    height: 54px;
  }
  .el-input::v-deep .el-input__inner[type="text"], .el-input::v-deep .el-input-group__append {
    font-size: 24px;
  }
  .search-bg{
    margin: 10px 100px 0px;
  }

</style>
<script>
import { UserModule } from '@/store/modules/user'
// import Btn from '@/views/data-search/btn.vue'
import { getAction } from '@/api/common'
import { OemModule } from '@/store/modules/oem'
export default {
  name: 'GlobalSearch',
  // components: { Btn },
  data() {
    return {
      // private currentRole = 'admin-dashboard'
      nation: [],
      keywords: '',
      nationList: [],
      logoStr: ''
    }
  },
  computed: {
    roles() {
      return UserModule.roles
    },
    oem() {
      return OemModule
    }
  },
  created() {
    this.fetchNationList()
    this.getLogo()
  },
  methods: {
    search(nation, keywords) {
      if (this.nation.length === 0) {
        this.$message.error('请选择国家')
        return
      }
      if (this.keywords.length === 0) {
        this.$message.error('请输入关键词')
        return
      }
      this.$router.push(`/data-search/global-engine?nation=${nation}&keywords=${keywords}`)
    },

    async fetchNationList() {
      const res = await getAction(null, 'globalSearch/GetInit')
      const rec = (m) => {
        if (m.children) {
          return ({ label: m.geoNameCn, value: m.id, children: m.children.map(rec) })
        }
        return ({ label: m.geoNameCn, value: m.id })
      }
      this.nationList = res.data.nationList?.map(rec) ?? []
    },

    /**
   * 尝试重新设置logo
   */
    getLogo() {
      const defaultLogo = '/logo.png'
      // if (this.$common.IsInExe()) {
      //   this.$common.ExeInvoke(formProcess => {
      //     const res = formProcess.GetLogo()
      //     if (typeof res === 'string' && res) {
      //       this.$nextTick(() => {
      //         // @ts-ignore
      //         this.logoStr = 'data:image/png;base64,' + res
      //       })
      //     } else {
      //       this.logoStr = defaultLogo
      //     }
      //   })
      // } else {
      this.logoStr = defaultLogo
    // }
    }
  }
}
</script>
